import QtQuick 2.12
import QtQuick.Window 2.12


Window  {
    id: id_root
    visible: true
    width: 1920
    height: 720
    //color: "black"
    property int curIndex: 0

    Rectangle {
        x : 152 //692
        y : 168
        width: 385
        height: 415
        color: "transparent"
        clip: true

        PathView {
            anchors.fill: parent
            id : id_pathView
            delegate: id_delegate //展示数据使用的delegate
            model: id_model  //数据模型
            path: path_view   //路径配置
            pathItemCount: 3  //显示的个数
            interactive : true
            currentIndex: id_root.curIndex
            highlight : id_highlight

            preferredHighlightBegin: 0.5
            preferredHighlightEnd: 0.5


            snapMode : PathView.SnapToItem
        }
    }


    ListModel {
        id:id_model

        ListElement {pic: "qrc:/res/car_s.png"; pic_sel: "qrc:/res/car_b.png"; name:"大巴"}
        ListElement {pic: "qrc:/res/energy_s.png"; pic_sel: "qrc:/res/energy_b.png"; name:"能耗"}
        ListElement {pic: "qrc:/res/music_s.png"; pic_sel: "qrc:/res/music_b.png"; name:"音乐"}
        ListElement {pic: "qrc:/res/navigation_s.png"; pic_sel: "qrc:/res/navigation_b.png"; name:"导航" }
        ListElement {pic: "qrc:/res/tire_s.png"; pic_sel: "qrc:/res/tire_b.png"; name:"胎压"}
    }

    Component{
        id: id_highlight
        Image {
            source: "qrc:/res/rect.png"

            visible: PathView.onPath
            width: 385
            height: 159
        }
    }

    Component{
         id: id_delegate

         Rectangle{
             width: 385
             height:id_root.curIndex===index? 159: 128
             color: "transparent"
             visible: PathView.onPath
             Image {
                 id: id_img
                 source: id_root.curIndex===index?pic_sel:pic
                 smooth:true
                 antialiasing: true
                 y: 0
                 height: parent.height
              }
             Text {
                 height: parent.height
                 anchors.left: id_img.right
                 text: name
                 font.pixelSize: id_root.curIndex===index?34:28
                 horizontalAlignment: Text.AlignHCenter // 水平居中对齐
                 verticalAlignment: Text.AlignVCenter
                 color: id_root.curIndex===index?"#037EF9": "#415780"
             }
             MouseArea{
                 anchors.fill: parent
                 onClicked: {
                     id_root.curIndex = index
                 }
             }
         }
    }

    Path{
        id:path_view

        startX: 192//231
        startY: 0

        PathLine { x: 192; y: 415}//593
     }
}
